<template>
  <div>
    <dialog-edit :visible.sync="dialogVisible" :title="'字典类型'" :editModel="editModel" :api="api" :form="form"
      :formRules="formRules" @onSave="onSave">
      <dym-form :editModel="editModel" :componentList="componentList" :formValue.sync="form"
        ></dym-form>
    </dialog-edit>
  </div>
</template>
<script>
  import BaseDialog from '@/pages/BaseDialog' // 弹框公共方法实例继承
  import DialogEdit from '@/components/dialog/DialogEdit' // 弹框组件
  import dymForm from '@/components/element/dymForm' // 表单组件
  export default {
    // 继承增改查弹框公共属性方法
    extends: new BaseDialog(),
    components: {
      DialogEdit,
      dymForm
    },
    data () {
      return {
        // 表单显示列信息
        componentList: [
          {
            label: '字典标签',
            prop: 'label', // 表单验证传入的值
            labelWidth: '110px',
            componentName: 'el-input',
            cols: [12, 12, 12, 12],
            placeholder: '请输入',
            value: 'label' // 字段显示的值
          },
          {
            label: '字典键值',
            prop: 'type', // 表单验证传入的值
            labelWidth: '110px',
            componentName: 'el-input',
            cols: [12, 12, 12, 12],
            placeholder: '请输入',
            value: 'type' // 字段显示的值
          },
          {
            label: '字典值',
            prop: 'value', // 表单验证传入的值
            labelWidth: '110px',
            componentName: 'el-input',
            cols: [12, 12, 12, 12],
            placeholder: '请输入',
            value: 'value' // 字段显示的值
          },
          {
            label: '状态',
            prop: 'useable', // 表单验证传入的值
            labelWidth: '110px',
            componentName: 'dict',
            dictTypeCode: 'useable',
            cols: [12, 12, 12, 12],
            placeholder: '请输入',
            value: 'useable' // 字段显示的值
          },
          {
            label: '排序号',
            prop: 'sort', // 表单验证传入的值
            labelWidth: '110px',
            componentName: 'el-input',
            cols: [12, 12, 12, 12],
            placeholder: '请输入',
            value: 'sort' // 字段显示的值
          },
          {
            label: '字典描述',
            prop: 'description', // 表单验证传入的值
            labelWidth: '110px',
            componentName: 'el-input',
            type: 'textarea',
            cols: [12, 12, 12, 12],
            placeholder: '请输入',
            value: 'description' // 字段显示的值
          },
          {
            label: '备注',
            prop: 'remarks', // 表单验证传入的值
            labelWidth: '110px',
            componentName: 'el-input',
            type: 'textarea',
            cols: [12, 12, 12, 12],
            placeholder: '请输入',
            value: 'remarks' // 字段显示的值
          }
        ],
        // 表单验证
        formRules: {
          label: [{ required: true, message: '不能为空', trigger: 'blur' }],
          type: [{ required: true, message: '不能为空', trigger: 'blur' }],
          value: [{ required: true, message: '不能为空', trigger: 'blur' }]
        }
      }
    },
    watch: {
      'dialogVisible' (val) {
        if (val) {
          this.typeShow()
        }
      }
    },
    created () {
      this.typeShow()
    },
    methods: {
      // 字典键值设置为不能编辑
      typeShow () {
        this.componentList.map(_ => {
          if (_.value === 'type') {
            _.disabled = true
          }
        })
      },
      // 弹框保存后查询
      onSave () {
        // 操作后重新查询数据字典
        this.$store.dispatch('GetDictionarys', 'reload')
        this.$emit('handSearch')
      }
    }
  }
</script>
